<template>
  <div style="background: #f7f9fc;padding-bottom: 60px;">
    <header-nav :active="0"/>
    <!--<div class="banner">-->
    <!--  <h1>开始一段美好的生活吧！</h1>-->
    <!--</div>-->
    <div class="recommend-title">
      <h1>最新房屋信息</h1>
      <p>给你推荐了一些最新的发布的房屋信息</p>
    </div>

    <el-row :gutter="48" justify="center" style="padding: 0 48px;">
      <el-col :span="7" v-for="item in houseList" :key="item.id">
        <HouseCardItem :house="item"/>
      </el-col>
    </el-row>

    <div class="more">
      查看更多
    </div>
  </div>
</template>

<script setup>
import HeaderNav from '@/components/HeaderNav.vue'
import HouseCardItem from "@/components/HouseCardItem.vue";
import {listHouse} from "@/api/house/house.js";

const houseList = ref([])

onMounted(() => {
  listHouse({
    page: 1,
    pageSize: 6,
    status: '0'
  }).then(res => {
    houseList.value = res.rows
  })
})
</script>

<style scoped lang="less">

.banner {
  width: 100vw;
  height: 80vh;
  background-image: url("@/assets/images/banner.png");
  background-size: cover;
  background-position: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  h1 {
    font-size: 80px;
    font-weight: bold;
    color: #4abb97;
    margin-bottom: 60px;
  }
}

.recommend-title {
  width: 80%;
  margin: 60px auto;
  text-align: center;

  h1 {
    font-size: 40px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
  }

  p {
    font-size: 20px;
    color: #999;
  }
}

.house-card {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  // 一行最多3个
  justify-content: flex-start; /* 水平方向的对齐方式，根据需要调整 */
}

.more {
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  margin: 30px auto;
  background: #1ab394;
}

</style>
